<template>
  <div class="doctor-detail-container">
    <van-nav-bar
      class="app-nav-bar"
      title="医生主页"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell-group class="doc-info">
      <van-cell class="base-info">
        <van-image
          class="avatar"
          slot="icon"
          width="50"
          height="50"
          round
          fit="cover"
          :src="doctor.imageUrl"
        />
        <div class="name">{{doctor.username}}</div>
        <div class="info">
          <span>{{doctor.professionalTitle  }}</span>  <span>{{doctor.gender==0?'男':'女'}}</span>
        </div>
      </van-cell>
      <van-cell title="擅长" :label="doctor.expertise">

      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="排班信息">
      </van-cell>
      <div>
        <van-tabs @click="handleClick">
          <van-tab title="全部日期"></van-tab>
          <van-tab v-for="item in dateList" :title="item.value">
          </van-tab>
        </van-tabs>
      </div>
    </van-cell-group>
    <van-cell-group v-for="item in scheList">
      <van-cell @click="toOrderSubmit(item)">
        <van-row>
          <van-col span="19">
            <div>
              <span>{{item.params.workDate}}</span> <span>星期{{ item.params.dayOfWeek }}</span> <span>{{item.params.workTime}}</span>
            </div>
            <div>
              <span>{{doctor.professionalTitle}}号 {{item.amount}}元</span>
            </div>
          </van-col>
          <van-col span="5">
            <van-tag round type="primary" size="large">余量:{{ item.availableNumber }}</van-tag>
          </van-col>
        </van-row>
      </van-cell>
    </van-cell-group>
<!--    <van-cell-group>-->
<!--      暂无患者评价-->
<!--    </van-cell-group>-->
    <van-cell-group class="comment-container">
      <van-cell @click="handleSkipComment" :title="commentAmount" is-link />
      <div>
        <van-cell v-for="item in commentList">
          <div>
            <span>用户{{item.id}}</span>
            <van-rate v-model="item.attitude" size="12px"/>
            <van-tag type="primary">预约挂号</van-tag>
          </div>
          <div>
            {{item.content}}
          </div>
        </van-cell>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import scheApi from '@/api/schedule'
import docApi from '@/api/doctor'
import commentApi from '@/api/comment'
import {computeTime,dateFormat} from "@/utils/dateUtils"
import login from "@/views/login";

export default {
  name: "DoctorDetailIndex",
  data(){
    return{
      doctor:{},
      dateList:[],
      rate:5,
      searchObj:{},
      show:false,
      id:'',
      scheList:[],
      commentList:[]
    }
  },
  computed:{
    commentAmount:{
      get(){
        return '患者评价（'+this.commentList.length+')'
      }
    }
  },
  created() {
    this.init()
  },
  methods:{
    async init(){
      this.id = this.$route.query.id
      await this.getDateList()
      await this.getDocInfo()
      await this.getRecentSchedule()
      await this.getComment()
    },
    async handleClick(index,title){
      let workDate
      if (index!==0){
        workDate = this.dateList[index-1].key
      }else{//说明查询全部
        return await this.getRecentSchedule()
      }
      let searchForm
      if (dateFormat(new Date())==workDate){
        searchForm = {workDate:workDate,docId:this.doctor.id,workTime:computeTime()}
      }else{
        searchForm = {workDate:workDate,docId:this.doctor.id}
      }
      //根据对应日期和编号查询对应的医生列表
      const{data:res} = await scheApi.findByCond(searchForm)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.scheList = res.data
    },
    async getComment(){
      const{data:res} = await commentApi.findByDocId(this.id)
      this.commentList = res.data
    },
    async getDateList(){
      const{data:res} = await scheApi.getRecentDayByDocId(this.id);
      this.dateList = res.data
    },
    async getDocInfo(){
      const{data:res} = await docApi.findById(this.id)
      if (res.code!=200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.doctor = res.data
    },
    async getRecentSchedule(){
      const{data:res} = await scheApi.findByDocId(this.id);
      this.scheList = res.data
    },
    toOrderSubmit(item){
      this.$router.push({
        name:'orderSubmit',
        params:{
          docName:this.doctor.username,
          serviceType:this.doctor.professionalTitle,
          waitTime:item.params.workTime,
          waitDate:item.params.workDate,
          depname:this.$route.query.depname,
          scheId:item.id
        }
      })
    },
    async handleSkipComment(){
      await this.$router.push({path: '/doctor/comment', query: {id: this.id}})
    }
  }
}
</script>

<style lang="less" scoped>
.doctor-detail-container{
  .doc-info{
    background-color: rgb(68,145,235);
    .base-info{
      box-sizing: border-box;
      height: 115px;
      padding-top: 38px;
      padding-bottom: 11px;
      background-color: unset;
      .avatar{
        box-sizing: border-box;
        width: 66px;
        height: 66px;
        border: 1px solid #fff;
        margin-right: 11px;
      }
      .name,.info {
        font-size: 15px;
        color: #fff;
      }
      .update-btn {
        height: 20px;
        font-size: 10px;
        color: #666666;
      }
    }
  }
  .not-login {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(68,145,235);
    .mobile {
      width: 66px;
      height: 66px;
    }
    .text {
      font-size: 14px;
      color: #fff;
    }
  }
}
.logout-cell{
  text-align: center;
  color: white;
  background-color: red;
}
</style>
